<template>
  <div class="card" v-if="data.yearOnYear==''">
       <div class="card-title">
         <span> {{data.name}}</span>
       </div>
       <div class="card-content">
         <span>{{data.quantity}}{{data.unit}}</span>
       </div>
  </div>
  <div  class="card1" v-else>
       <div class="card-title">
         <span> {{data.name}}</span>
       </div>
       <div class="card-content">
         <span>{{data.quantity}}{{data.unit}}</span>
       </div>
       <div class="card-box-border">
               <div class="card-box-border-text">
                      同比
               </div>
                 <div class="card-box-border-right">
                 <span class="content-icon" v-if="data.type==0"> <el-icon class="iconSpin" size="0.8rem" color=" #FF0101"><sc-icon-UpDownMark /></el-icon> </span>
                 <span class="content-icon" v-if="data.type==1"> <el-icon  size="0.8rem" color="#00A331"><sc-icon-UpDownMark /></el-icon> </span>
                 <span class="card-box-border-right-text" v-if="data.type==1">{{data.yearOnYear}}</span>
                  <span class="card-box-border-right-text1" v-if="data.type==0">{{data.yearOnYear}}</span>
               </div>
       </div>
  </div>
</template>

<script>
export default {
    props:{
        data:{
        type:String,
          default:''
        },
        index:{
          type:Number,
          default:0
        }
    }
}
</script>

<style scoped>
.card{
    width: 100%;
height: 6rem;
background: #FFFFFF;
box-shadow: 0px 0px 0rem 0.05rem rgba(0,0,0,0.16);
border-radius: 0.83rem  0.83rem  0.83rem  0.83rem;
}
.card1{
width: 100%;
height: 9.5rem;
margin-top: 1rem;
background: #FFFFFF;
box-shadow: 0px 0px 0rem 0.05rem rgba(0,0,0,0.16);
border-radius:  0.83rem  0.83rem  0.83rem  0.83rem;
opacity: 1;
}
.card-title{
    margin-top: 1.2rem;
    margin-left: 1rem;
    font-size: 1.1rem;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: var(--el-color-text-3);
}
.card-content{
        margin-top: 1rem;
    margin-left: 1rem;
font-size: 1.4rem;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: var(--el-color-text-3);
}
.card-box-border{
    margin-top: 0.8rem;
    padding-top: 1rem;
    height: 2rem;
    border-top: 1px solid #E9E9E9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-box-border-text{
    /* margin-top: 13rem; */
        margin-left: 1rem;
font-size: 1.1rem;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: var(--el-color-text-6);
}
.card-box-border-right{
    /* margin-top: 13rem; */
}
.card-box-border-right-text{
    margin-right: 0.4rem;
    margin-left: 0.2rem;
    font-size: 1.1rem;
font-weight: 400;
color: #00A331;
}
.card-box-border-right-text1{
    margin-right: 0.4rem;
    margin-left: 0.2rem;
    font-size: 1.1rem;
font-weight: 400;
color: #FF0101;
}
.iconSpin{
  transform:rotate(180deg)
}
</style>